<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>overflow</title>
    <style>
        div.ex1 {
            /* overflow属性指定如果内容溢出一个元素的框，会发生什么。 */
            overflow: scroll;
            width: 300px;
            height:  200px;
            /* 	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 */
        }
        
        div.ex2 {
            overflow: hidden;
            width: 300px;
            height:  200px;
            /* 内容会被修剪，并且其余内容是不可见的。 */
        }
        
        div.ex3 {
            overflow: auto;
            width:300px;
            height:  200px;
            /* 	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 */
        }
        
        div.ex4 {
            overflow: visible;
            width: 300px;
            height:  200px;
            /* 默认值。内容不会被修剪，会呈现在元素框之外。 */
        }
    </style>
</head>
<body>
  <div class="ex1"><p>	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容</p></div>  
  <div class="ex2"><p>内容会被修剪，并且其余内容是不可见的内容会被修剪，并且其余内容是不可见的内容会被修剪，并且其余内容是不可见的内容会被修剪，并且其余内容是不可见的内容会被修剪，并且其余内容是不可见的内容会被修剪，并且其余内容是不可见的内容会被修剪，并且其余内容是不可见的内容会被修剪，并且其余内容是不可见的内容会被修剪，并且其余内容是不可见的</p></div>  
  <div class="ex3"><p>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</p></div>  
  <div class="ex4"><p>默认值。内容不会被修剪，会呈现在元素框之外默认值。内容不会被修剪，会呈现在元素框之外默认值。内容不会被修剪，会呈现在元素框之外默认值。内容不会被修剪，会呈现在元素框之外默认值。内容不会被修剪，会呈现在元素框之外默认值。内容不会被修剪，会呈现在元素框之外</p></div>  
</body>
</html>